<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻列表</title>
    <style>
        /* * {
            background-color: rgb(224, 214, 214);
        } */
        /* 定义大盒子的大小及其位置 */
        .bigbox {
            width: 1110px;
            height: 622px;
            /* background-color: pink; */
            margin: 0 auto;
        }

        /* 定义每一个小盒子的大小位置并且添加相对定位 */
        .bigbox>div {
            float: left;
            width: 360px;
            height: 306px;
            background-color: rgb(242, 245, 247);
            margin-left: 10px;
            margin-bottom: 10px;
            /* 相对定位与下面的绝对定位搭配使用 */
            position: relative;
        }

        /* 当鼠标移动到图片上时鼠标变成手的形状 */
        .bigbox>div img:hover{
            cursor: pointer;
        }

        .left,
        .right {
            color: rgba(0, 0, 0, .3);
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }

        /* 制作每一个小盒子左上角的小图标 */
        .left-top {
            /* 绝对定位:紧跟着方向以便控制位置 */
            position: absolute;
            top: 12px;
            left: 12px;
            height: 21px;
            width: 41px;
            background-color: red;
            border-radius: 5px;
            /* 当hight=line-hight时文字是在垂直方向上居中 */
            line-height: 21px;
            /* 水平居中 */
            text-align: center;
        }

        .special {
            width: 71px;
        }

        /* 实现超出文字自动省略功能 */
        h4 {
            /* 1.强制一行内显示文本 */
            white-space: nowrap;
            /* 2.一行内多出的文字隐藏 */
            overflow: hidden;
            /* 3.文字用省略号代替超出部分 */
            text-overflow: ellipsis;
        }
        .bigbox>div:hover{
             box-shadow: 0 0 13px 2px;
        }
    </style>
</head>

<body>

    <!-- 页面布局:bigbox盒子里面套着六个小盒子 -->
    <div class="bigbox">
        <div>
            <img src="images/1.jpg" alt="">
            <h4>如何利用动态URL提升SEO及处理业务逻辑</h4>
            <div class="left">又小拍</div>
            <div class="right">2018年08月25日</div>
            <div class="left-top">CDN</div>
        </div>
        <div>
            <img src="images/2.jpg" alt="">
            <h4>问卷调查中奖名单 8.13</h4>
            <div class="left">zhongxing</div>
            <div class="right">2018年07月26日</div>
            <div class="left-top">CDN</div>
        </div>
        <div>
            <img src="images/3.jpg" alt="">
            <h4>又拍云 CDN 正式支持 TLS 1.3 加密协议，一键开启极速 HTTPS 体验</h4>
            <div class="left">xuejun</div>
            <div class="right">2018年01月15日</div>
            <div class="left-top special">TLS1.3</div>
        </div>
        <div>
            <img src="images/4.jpg" alt="">
            <h4>选SSL证书这件小事儿有多难？ 又拍云多款免费证书任你选
            </h4>
            <div class="left">又小拍</div>
            <div class="right">2018年08月25日</div>
            <div class="left-top">SSL</div>
        </div>
        <div>
            <img src="images/5.jpg" alt="">
            <h4>又拍云短信服务上线啦！</h4>
            <div class="left">子時</div>
            <div class="right">2017年11月06日</div>
            <div class="left-top special">短信服务</div>
        </div>
        <div>
            <img src="images/6.jpg" alt="">
            <h4>Facebook 将惩过慢网站，网站加速该如何充电？
            </h4>
            <div class="left">又小拍</div>
            <div class="right">2017年09月19日</div>
            <div class="left-top">CDN</div>
        </div>
    </div>
</body>

</html>